<template>
  <div class="personEnter" @mouseenter="personEnter" @mouseleave="personLeave">
    <img src="@/assets/image/529465.jpg">
    <span>大石板</span>
    <i class="iconfont icon">&#xe651;</i>
    <ul class="personMenu">
      <li><router-link to="/PersonalCenter">个人中心</router-link></li>
      <li><router-link to="/">退出</router-link></li>
    </ul>
  </div>
</template>
<script setup>
const personEnter = () => {
  $('.personMenu').stop().slideDown();
}

const personLeave = () => {
  $('.personMenu').stop().slideUp();
}

</script>
<style scoped>
.personEnter {
  float: right;
  line-height: 50px;
  margin-right: 100px;
  cursor: pointer;
}

.personEnter:hover .icon {
  transform: rotate(180deg);
  transform-origin: center;
}

img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: text-top;
}

i {
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  transition: all .5s;
}

.personMenu {
  position: absolute;
  background-color: #dee1e6;
  text-align: center;
  border-radius: 7px;
  margin-top: 5px;
  display: none;
  z-index: 999;
}

li {
  padding: 0 20px;
  cursor: pointer;
}

li:hover {
  background-color: aliceblue;
}
</style>
